<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<style>
    .layui-inline{padding: 5px 0;}
</style>
<body class="timo-layout-page">
<div class="layui-card">
    <div class="layui-card-header timo-card-header">
        <span><i class="fa fa-bars"></i>结算列表</span>
        <i class="layui-icon layui-icon-refresh refresh-btn"></i>
    </div>
    <div class="layui-card-body">
        <div class="layui-row timo-card-screen">
            <form id="settleAccountSearchFrom" class="pull-left layui-form-pane layui-form timo-search-box">
                <div class="layui-inline">
                    <label class="layui-form-label">结算单号</label>
                    <div class="layui-input-block">
                        <input type="text" name="settleNo" placeholder="请输入结算单号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">账户名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="accountName" placeholder="请输入账户名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">银行卡号</label>
                    <div class="layui-input-block">
                        <input type="text" name="accountNo" placeholder="请输入银行卡号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结算状态</label>
                    <div class="layui-input-inline">
                        <!--<select class="timo-search-select" name="status" mo:dictKey="SEARCH_STATUS" mo-selected="${param.status}"></select>-->
                        <select name="orderStatus">
                            <option value="">请选择==</option>
                            <option value="AUDIT">审核中</option>
                            <option value="PASS">审核通过</option>
                            <option value="NO_PASS">审核不通过</option>
                            <option value="DONE">打款成功</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结算日期</label>
                    <div class="layui-input-block">
                        <!--<select class="timo-search-select" name="status" mo:dictKey="SEARCH_STATUS" mo-selected="${param.status}"></select>-->
                        <input type="text" class="layui-input" style="width: 180px;" name="betweenDate" id="betweenDate" placeholder="点击选择日期范围">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" type="button" onclick="$.fn.layTableSearch('settleAccountTable','settleAccountSearchFrom','/settleAccount/data')">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
        <table class="layui-table" id="settleAccountTable" lay-filter="settleAccountTable">
        </table>
    </div>
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-3.3.1.min.js}"></script>
<script type="text/javascript">
    layui.use(['element', 'form', 'table','laydate','layer'], function () {
        layui.laydate.render({
            elem: '#betweenDate'
            ,range: '~'
        });

        var table = layui.renderLayTable({
            elem: '#settleAccountTable'
            ,url:'/settleAccount/data'
            ,page: true
            ,cols: [
                [   {field:'id', hide: true}
                    ,{field:'settleNo', width:150, title: '结算单号',sort:true}
                    ,{field:'accountName', width:100, title: '账号名称'}
                    ,{field:'accountNo', width:150, title: '银行卡号'}
                    ,{field:'totalAmount', width:100, title: '结算金额', sort: true,templet:'<div>{{d.settleAmount/100}}元</div>'}
                    ,{field:'fee', width:100, title: '手续费',templet:'<div>{{d.fee}}元</div>'}
                    ,{field:'payAmount', width:100, title: '打款金额', sort: true,templet:'<div>{{d.payAmount/100}}元</div>'}
                    ,{field:'settleStatus', width:100, title: '结算状态',templet:'#settleStatusTpl'}
                    ,{field:'createDate', width:150, title: '创建时间',sort:true}
                    ,{field:'id', width:150, title: '操作',toolbar: '#bar'}
                ]
            ]
        });
        layui.table.on('sort(settleAccountTable)', function(sort){
            $.fn.layTableSearch('settleAccountTable','settleAccountSearchFrom','/settleAccount/data',sort);
        });

        layui.table.on('tool(settleAccountTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                var url = "/settleAccount/detail?id="+data.id;
                window.layerIndex = layui.layer.open({
                    type: 2,
                    title: '结算信息',
                    shadeClose: true,
                    maxmin: true,
                    area: ['800px', '500px'],
                    content: [url, 'on'],
                    cancel: function(index, layero){
                        $.fn.layTableSearch('settleAccountTable','settleAccountSearchFrom','/settleAccount/data');
                        return true;
                    }
                });
            }
            if(obj.event === 'auditSettleAccount'){
                var url = "/settleAccount/toAudit?id="+data.id;
                window.layerIndex = layui.layer.open({
                    type: 2,
                    title: '结算审核',
                    shadeClose: true,
                    maxmin: true,
                    area: ['800px', '500px'],
                    content: [url, 'on']
                });
            }
            if(obj.event === 'paySettleAccount'){
                var url = "/settleAccount/toPay?id="+data.id;
                window.layerIndex = layui.layer.open({
                    type: 2,
                    title: '结算打款',
                    shadeClose: true,
                    maxmin: true,
                    area: ['800px', '500px'],
                    content: [url, 'on']
                });
            }
        });
    });
</script>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详细</a>
    {{#  if(d.settleStatus === 'AUDIT' && '[[${isAdmin}]]' === 'true'){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="auditSettleAccount">审核</a>
    {{#  } }}
    {{#  if(d.settleStatus === 'PASS' && '[[${isAdmin}]]' === 'true'){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="paySettleAccount">打款</a>
    {{#  } }}
</script>

<script type="text/html" id="settleStatusTpl">
    {{#  if(d.settleStatus === 'AUDIT'){ }}
    <span>审核中</span>
    {{#  } }}
    {{#  if(d.settleStatus === 'PASS'){ }}
    <span>审核通过</span>
    {{#  } }}
    {{#  if(d.settleStatus === 'NO_PASS'){ }}
    <span>审核不通过</span>
    {{#  } }}
    {{#  if(d.settleStatus === 'DONE'){ }}
    <span>打款成功</span>
    {{#  } }}
</script>
</body>
</html>
